<script setup lang="ts">
import { ArrowRight, Expand, Grid } from '@element-plus/icons-vue'
const tableData = [
    {
        type: '调休假',
        name: 'Tom',
        duration: '5',
        time1: '2009-9-9',
        time2: '2009-9-9',
        state: '审批中',
        reason:'有事儿'

    },
    {
        type: '调休假',
        name: 'Tom',
        duration: '5',
        time1: '2009-9-9',
        time2: '2009-9-9',
        state: '审批中',
        reason:'有事儿'

    },
    {
        type: '调休假',
        name: 'Tom',
        duration: '5',
        time1: '2009-9-9',
        time2: '2009-9-9',
        state: '审批中',
        reason:'有事儿'

    },
    {
        type: '调休假',
        name: 'Tom',
        duration: '5',
        time1: '2009-9-9',
        time2: '2009-9-9',
        state: '审批中',
        reason:'有事儿'


    },
]

</script>
<template>
    <div class="head">休假记录</div>
    <div class="bread">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/d' }">时间管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/d' }">休假记录</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="body">

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="申请人" width="120" />
            <el-table-column prop="type" label="假期类型" width="120" />
            <el-table-column prop="duration" label="时长" width="120" />
            <el-table-column prop="time1" label="开始时间" width="120" />
            <el-table-column prop="time2" label="结束时间" width="120" />
            <el-table-column prop="state" label="状态" width="200" />
        </el-table>

    </div>
</template>

<style scoped>
.head {
    height: 30px;
    background-color: rgb(255, 255, 255);
    line-height: 30px;
    font-size: 30px;
    padding: 25px;
    color: #000;
}

.bread {
    height: 30px;
    background-color: rgb(215, 215, 215);
    padding-top: 20px;
    padding-left: 20px;
    vertical-align: bottom;
}

.body {
    width: 100%;
    /* height: 100%; */
    background-color: rgb(255, 255, 255);
    padding: 40px;
}
</style>